<template>
	<view class="box-page">
		<view class="box-slideLeft">
			<view class="touch-item touch-slideLeft " @touchstart="touchS" @touchmove="touchM" @touchend="touchE"
				:style="item_show.txtStyle">
				<slot />
				 <!-- name="delLeft" :item="item" :index="index" -->
			</view>
 <!-- -->
			<view class="touch-item del-box-touch-slideLeft cf-shuCenter" style="display: flex;">
				<view class="touch-item-cell" style="background-color:#007aff ;"  @click="delItem(item,0)"><text >{{is_mute == 1?'取消静音':'静音'}}</text></view>
				<view class="touch-item-cell" style="background-color:#AA7942 ;" @click="delItem(item,1)" ><text>{{is_top == 1?'取消置顶':'置顶'}}</text></view>
				<view class="touch-item-cell" style="background-color:#00FDFF ;" @click="delItem(item,2)"><text>{{'删除'}}</text></view>
			</view>

		</view>
		
	</view>
</template>

<script>
	export default {
		components: {

		},
		props: {

			data_transit: {
				type: Object,
				default () {
					return {}
				}
			},
			//可不传参
			item: {
				type: Object,
				default () {
					return {}
				}
			},
			isdel: {
				type: Number,
				default: 0
			},
			is_mute: {
				type: Number,
				default: 0
			},
			is_top: {
				type: Number,
				default: 0
			},
			// item_show: {
			// 	type: Object,
			// 	default () {
			// 		return {

			// 		}
			// 	}
			// }
		},
		computed: {

		},

		data() {
			return {
				item_show : {},
				delBtnWidth: 210, //删除按钮宽度单位（rpx）
				startX: '',
				refreshstate: false,
				delstate: false,
				info: [],
			};
		},
		created: function() {
			//专门处理检查对象中，某字段是否存在的，如果存在返回 true 不存在返回 false
			let that = this;
			let item = that.item;
			
			if (!item.hasOwnProperty("txtStyle")) {
				this.$set(this.item, 'txtStyle', ''); //不需要初始化了
			}
			this.item_show = this.item;

		},
		watch: {
			item(e) {
				this.item_show = e;
			},
		},
		mounted() {
		    this.$nextTick(function () {
		      this.$on('refreshPage', function () {
		        console.log('$emit配合$on实现调用子组件方法')
		      })
		    })
		  },
		methods: {
			refreshPage(){
				console.log('refreshPage');
				this.item_show.txtStyle = '';
				
				this.$forceUpdate();
			},
			

			
			//点击删除按钮事件
			delItem(data,index) {
				console.log(this.data_transit);
					this.$emit('delItem', this.data_transit,index);
				

			},
			touchS: function(e) {
				let that = this;
				
				if (e.touches.length == 1) {
					//设置触摸起始点水平方向位置
					this.startX = e.touches[0].clientX

				}
			},
			touchM: function(e) {
				let that = this;

				if (e.touches.length == 1) {
					//手指移动时水平方向位置
					var moveX = e.touches[0].clientX;
					//手指起始点位置与移动期间的差值
					var disX = this.startX - moveX;
					var delBtnWidth = this.delBtnWidth;
					var txtStyle = "";
					if (disX == 0 || disX < 0) { //如果移动距离小于等于0，说明向右滑动，文本层位置不变
						txtStyle = "left:0px";
					} else if (disX > 0) { //移动距离大于0，文本层left值等于手指移动距离
						txtStyle = "left:-" + disX + "px";
						if (disX >= delBtnWidth) {
							//控制手指移动距离最大值为删除按钮的宽度
							txtStyle = "left:-" + delBtnWidth + "px";
						}
					}
					//获取手指触摸的是哪一项

					that.item_show.txtStyle = txtStyle;

					
				}
			},
			touchE: function(e) {
				let that = this;
				if (e.changedTouches.length == 1) {
					//手指移动结束后水平位置
					var endX = e.changedTouches[0].clientX;
					//触摸开始与结束，手指移动的距离
					var disX = this.startX - endX;
					var delBtnWidth = this.delBtnWidth;
					//如果距离小于删除按钮的1/2，不显示删除按钮
					var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
					//获取手指触摸的是哪一项
					that.item_show.txtStyle = txtStyle;

				}
				// that.$forceUpdate();

			},

		}

	}
</script>
<style lang="less" scoped>
	
</style>
<style lang="scss">
	
	.box-page {
		position: relative;
		// z-index: 99;
	}

	.box-slideLeft {
		view {
			box-sizing: border-box;
		}

		position: relative;
		overflow: hidden;

		// height:200upx;
		.touch-item {
			position: absolute;
			top: 0;
			height: 100%;
			// padding: 0px 10px 0px;
			background-color: #FFFFFF;
			// border-radius: 10px;
			overflow: hidden;
		}

		.touch-slideLeft {
			position: relative;
			width: 100%;
			z-index: 5;
			transition: left 0.2s ease-in-out;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			display: flex;
			align-items: center;
		}

		.del-box-touch-slideLeft {
			right: 0;
			float: left;
			
			height: 100%;
			line-height: 100%;
			// width: 240px;
			// height: 100%;
			
			// border-radius: 0 10px 10px 0;
			color: #fff;
			font-size: 18px;
			// font-weight: lighter;
			// text-align: center;
			
			display: flex;
			align-items: center;
		}

		.icon-shanchu {
			font-size: 44upx;
		}

		.cf-shuCenter {
			display: flex;
			// flex-direction: column;
			justify-content: space-between;
			align-items: center;

		}
		
		.touch-item-cell{
			height: 100%;
			// line-height: inherit‌‌;
			// position: relative;
			// line-height: 1.5em;
			padding: auto 0;
			text-align: center;
			width: 70px;
			
			align-items: center;
			justify-content: center;
			display: flex;
			
		}
	}
</style>